<div class="body">
  <!--过滤查询-->
  <nz-row>
    <div class="searchItem">
      <label for="number">订单编号</label>
      <input id="number" nz-input placeholder="请输入订单号" [(ngModel)]="query.orderNum"/>
    </div>
    <div class="searchItem">
      <label for="user">用户</label>
      <input id="user" nz-input placeholder="请输入用户Id" [(ngModel)]="query.userId"/>
    </div>
    <div class="searchItem">
      <label for="status">订单状态</label>
      <nz-select id="status" [(ngModel)]="query.status" nzMode="multiple"
                 [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择订单状态" [nzBackdrop]="true" nzShowSearch>
        <nz-option [nzValue]="0" nzLabel="待付款"></nz-option>
        <nz-option [nzValue]="1" nzLabel="开通中"></nz-option>
        <nz-option [nzValue]="2" nzLabel="交易完成"></nz-option>
        <nz-option [nzValue]="3" nzLabel="支付超时"></nz-option>
        <nz-option [nzValue]="4" nzLabel="客服取消"></nz-option>
        <nz-option [nzValue]="5" nzLabel="交易结束"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="template">开通方式</label>
      <nz-select id="template" [(ngModel)]="query.goodsType" nzMode="multiple"
                 [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择开通方式" [nzBackdrop]="true">
        <nz-option [nzValue]="0" nzLabel="购买"></nz-option>
        <nz-option [nzValue]="1" nzLabel="免费领取"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="startDate">开通时间</label>
      <nz-range-picker id="startDate" nzFormat="yyyy-MM-dd" [(ngModel)]="query.startDate"></nz-range-picker>
    </div>
    <div class="searchItem">
      <label for="endDate">到期时间</label>
      <nz-range-picker id="endDate" nzFormat="yyyy-MM-dd" [(ngModel)]="query.endDate"></nz-range-picker>
    </div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
      <button nz-button nzType="default" (click)="resetCondition()">重置</button>
    </div>
  </nz-row>
  <div style="margin-bottom: 8px">
    <button nz-button nzType="primary" (click)="export()">导出</button>
  </div>
  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzTableLayout="fixed"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzAlign="center" nzWidth="160px">订单号</th>
      <th nzAlign="center">用户ID</th>
      <th nzAlign="center">商品</th>
      <th nzAlign="center">规格</th>
      <th nzAlign="center">开通方式</th>
      <th nzAlign="center">官方价格</th>
      <th nzAlign="center">优惠金额</th>
      <th nzAlign="center">支付爱豆</th>
      <th nzAlign="center">实收金额</th>
      <th nzAlign="center" nzWidth="160px">开通时间</th>
      <th nzAlign="center" nzWidth="160px">到期时间</th>
      <th nzAlign="center">订单状态</th>
      <th nzAlign="center" nzWidth="160px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
      <td nzAlign="center">{{ data['orderNum'] }}</td>
      <td nzAlign="center">{{ data['userId'] }}</td>
      <td nzAlign="center">{{ data['goodsName'] }}</td>
      <td nzAlign="center">{{ data['goodsSpec'] }}</td>
      <td nzAlign="center">{{ data['goodsType'] === 0 ? '购买' : '免费领取' }}</td>
      <td nzAlign="center">{{ data['goodsOriginalPrice'] }}</td>
      <td nzAlign="center">{{ data['favorablePrice'] }}</td>
      <td nzAlign="center">{{ data['aiDouAmount'] }}</td>
      <td nzAlign="center">{{ data['realPrice'] }}</td>
      <td nzAlign="center">{{ data['payTime'] }}</td>
      <td nzAlign="center">{{ data['expireTime'] }}</td>
      <td nzAlign="center" [attr.color]="data['status']">{{ maintainBlueprintService.ORDERSTATUS[data['status']] }}</td>
      <td nzAlign="center">
        <a [routerLink]="['/maintain-blueprint/memberOrderDetail']" [queryParams]="{id: data['id']}">查看</a>
        <a (click)="showTrackModal(data['orderNum'])">跟进</a>
        <a (click)="cancel(data['id'])" *ngIf="[0,1].includes(data['status'])">取消订单</a>
        <a (click)="showAfterSalesRefundModal(data['id'])" *ngIf="[2].includes(data['status'])">售后退款</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>

</div>
<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

<!--售后退款-->
<nz-modal
  [(nzVisible)]="afterSalesRefundModal.visible"
  nzTitle="售后退款"
  (nzOnCancel)="hideAfterSalesRefundModal()">
  <div *nzModalContent>
    <div class="searchItem">
      <label for="afterSalesRefundModalPrice" style="width: 130px"><span>*</span>退款金额（元）：</label>
      <input id="afterSalesRefundModalPrice" nz-input placeholder="请输入退款金额" [(ngModel)]="afterSalesRefundModal.price"/>
    </div>
    <div class="searchItem afterSalesRefundModal">
      <label for="afterSalesRefundModalRemark" style="width: 130px">备注：</label>
      <textarea
        id="afterSalesRefundModalRemark"
        nz-input
        [maxLength]="100"
        [(ngModel)]="afterSalesRefundModal.remark"
        placeholder="请输入备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideAfterSalesRefundModal()">取消</button>
    <button nz-button nzType="primary" (click)="refund()">确认</button>
  </div>
</nz-modal>
